<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-09 10:32:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-05 15:17:16
 * @Description: 应用配置
 -->
<template>
  <div class="body">
    <div class="top">
      <div style="margin-right: 8px">
        <p class="fitstTitle">
          分布式事务AT模式前提：
        </p>
        <p>1、基于支持本地 ACID 事务的关系型数据库</p>
        <p>2、Java 应用，通过 JDBC 访问数据库</p>
        <p class="fitstTitle">
          整体机制：
        </p>
        <p>
          一阶段：业务数据和回滚日志记录在同一个本地事务中提交，释放本地锁和连接资源。
        </p>
        <p>
          二阶段： 提交异步化，非常快速地完成。
          回滚通过一阶段的回滚日志进行反向补偿,如下例。
        </p>
        <p class="fitstTitle">
          写隔离：
        </p>
        <p>
          一阶段本地事务提交前，需要确保先拿到 全局锁 。 拿不到 全局锁
          ，不能提交本地事务。 拿 全局锁
          的尝试被限制在一定范围内，超出范围将放弃，并回滚本地事务，释放本地锁。
        </p>
        <p class="fitstTitle">
          读隔离：
        </p>
        <p>
          在数据库本地事务隔离级别 读已提交（Read Committed）
          或以上的基础上，Seata（AT 模式）的默认全局隔离级别是 读未提交（Read
          Uncommitted） 。 如果应用在特定场景下，必需要求全局的 读已提交 ，目前
          Seata 的方式是通过 SELECT FOR UPDATE 语句的代理。
        </p>
      </div>
      <div style="float: right">
        <img
          src="@/assets/img/systemDemonstration/at.png"
          alt="sidemenu"
        >
      </div>
    </div>
    <div style="padding: 0 1%">
      <p class="fitstTitle">
        示例：
      </p>
      <p>正常输入数据，AB服务将顺序插入相同数据。</p>
      <p>测试输入test会引起A服务发生异常，本地事务直接进行回滚。</p>
      <p>输入test1会引起B服务发生异常，同时回滚A服务数据，AB都无数据保存。</p>
    </div>

    <div class="left-container">
      <fks-query-page
        v-loading="aLoading"
        :data="aTableData"
        :total="aTotal"
        :page-size.sync="pageSize"
        :current-page.sync="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 50, 100]"
        :element-loading-text="LANG.LOADING"
        table-name="A服务内列表"
        @query="getData"
      >
        <template slot="singleSearch">
          <div class="single-searchBox">
            <fks-button
              type="primary"
              icon="fks-icon-plus"
              @click="add"
            >
              <span> {{ LANG.ADD }}</span>
            </fks-button>
          </div>
        </template>
        <template>
          <fks-table-column
            type="index"
            align="center"
            label="#"
          >
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </fks-table-column>
          <fks-table-column
            prop="name"
            :label="LANG.USER_FULL_NAME"
          />
          <fks-table-column
            prop="createBy"
            :label="LANG.CREATE_BY"
          />
          <fks-table-column
            prop="createDate"
            :label="LANG.CREATE_DATE"
          />
        </template>
      </fks-query-page>
    </div>
    <div class="right-container">
      <fks-query-page
        v-loading="bLoading"
        :data="bTableData"
        :total="bTotal"
        :page-size.sync="bPageSize"
        :current-page.sync="bPageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 50, 100]"
        :element-loading-text="LANG.LOADING"
        table-name="B服务内列表"
        @query="getServiceList"
      >
        <template>
          <fks-table-column
            type="index"
            align="center"
            label="#"
          >
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </fks-table-column>
          <fks-table-column
            prop="name"
            :label="LANG.USER_FULL_NAME"
          />
          <fks-table-column
            prop="createBy"
            :label="LANG.CREATE_BY"
          />
          <fks-table-column
            prop="createDate"
            :label="LANG.CREATE_DATE"
          />
        </template>
      </fks-query-page>
    </div>
    <fks-dialog
      v-if="dialogVisible"
      :visible="dialogVisible"
      :append-to-body="true"
      width="480px"
      @close="close"
    >
      <div slot="title">
        {{ LANG.ADD }}
      </div>
      <fks-form
        ref="Form"
        :model="Form"
        label-width="80px"
      >
        <fks-form-item
          :span="24"
          lead
          prop="name"
          required
        >
          <span slot="label">
            <span style="margin-right: 4px">{{ LANG.USER_FULL_NAME }}</span>
            <fks-tooltip>
              <div
                slot="content"
                style="font-size: 14px; line-height: 36px"
                class="tips-container"
              >
                {{ LANG.INPUT_TIP }}
              </div>
              <i class="fks-icon-question" />
            </fks-tooltip>
          </span>
          <fks-input
            v-model="Form.name"
            maxlength="20"
            show-word-limit
          />
        </fks-form-item>
      </fks-form>
      <template slot="footer">
        <fks-button
          type="primary"
          icon="fks-icon-check"
          :loading="saveLoading"
          @click="save"
        >
          <span style="margin-left: 4px">{{ LANG.SAVE }}</span>
        </fks-button>
      </template>
    </fks-dialog>
  </div>
</template>

<script>
import { saveData, getData, getDataList } from './api'
export default {
  name: 'DistributedTransaction',
  data() {
    return {
      type: 'add',
      loadingClient: false,
      visible: false,
      node: {},
      bPageSize: 20,
      bPageNo: 1,
      pageSize: 20,
      pageNo: 1,
      aTotal: 0,
      aLoading: false,
      bLoading: false,
      saveLoading: false,
      bTotal: 0,
      dialogVisible: false,
      aTableData: [],
      bTableData: [],
      list: [],
      Form: {},
      sort: '',
      columnName: ''
    }
  },
  computed: {},
  mounted() {
    this.getData()
    this.getServiceList()
  },
  methods: {
    //打开弹窗
    add() {
      this.dialogVisible = true
    },
    //关闭弹窗
    close() {
      this.dialogVisible = false
      this.Form = {}
      this.$refs.Form.clearValidate()
    },
    //保存表单数据
    save() {
      this.$refs.Form.validate((valid) => {
        if (valid) {
          this.saveLoading = true
          saveData(this.Form)
            .then((res) => {
              this.saveLoading = false
              this.close()
              if (res.status) {
                this.$message.success(this.LANG.ADD_SUCCESS)
              }
              this.getData()
              this.getServiceList()
            })
            .catch(() => {
              this.saveLoading = false
            })
        }
      })
    },
    //获取左边列表数据
    getData() {
      this.aTableData = []
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.aLoading = true
      this.getDataList(params)
    },
    //获取左边列表数据
    getDataList(params) {
      getData(params)
        .then((res) => {
          if (res.data && res.data.list) {
            this.aTableData = res.data.list
            this.aTotal = res.data.total
          }
          this.aLoading = false
        })
        .catch(() => {
          this.aLoading = false
        })
    },
    //获取右边列表数据
    getServiceList() {
      this.bTableData = []
      let params = {
        pageNo: this.bPageNo,
        pageSize: this.bPageSize
      }
      this.bLoading = true
      getDataList(params)
        .then((res) => {
          if (res.data && res.data.list) {
            this.bTableData = res.data.list
            this.bTotal = res.data.total
          }
          this.bLoading = false
        })
        .catch(() => {
          this.bLoading = false
        })
    }
  }
}
</script>
<style scoped lang="scss">
.left-container {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 800px;
  vertical-align: top;
}

.right-container {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 800px;
  vertical-align: top;
}

.body {
  width: 100%;
  height: 100%;
  padding: 20px;
  padding-bottom: 10px;
  overflow-y: auto;
  background-color: white !important;
}

.top {
  display: flex;
  padding: 1% 1% 0;
}

.firstTitle {
  width: 100%;
  font-weight: bold;
  font-size: 16px;
}
</style>